<template>
  <div class="home-header">
    <div class="header-left iconfont">&#xe63b;</div>
    <div class="header-input">
      <input type="text" class="input" placeholder="请输入城市/景点">
      <div class="iconfont">&#xe635;</div>
    </div>
    <div class="header-right">北京<span class="iconfont arrow">&#xe600;</span></div>
  </div>
</template>

<script>
export default {
    name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/varibles.styl'
  .home-header
    display: flex
    line-height: .86rem
    background: $bgColor
    color: #fff
    .header-left
      width: .84rem
      text-align: center
      &.iconfont
        color: #d42379
        font-size: .45rem
    .header-input
      flex: 1
      position: relative
      // border: 1px solid red
      .input
        width: 100%
        height: .64rem
        border-radius: .15rem
        padding-left: .5rem
        box-sizing: border-box
      .iconfont
        display: inline-block
        position: absolute
        //background: red
        left: .1rem
        color: #1577f9
        font-size: .3rem
        font-weight: bold
        line-height: .86rem
    .header-right
      text-align: center
      width: 1rem
      .arrow
        margin-left: .08rem
        font-size: .1rem
        color: #1577f9
        font-weight: bold
</style>
